import React from 'react';
import { Link } from 'react-router';

class Schedule extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Schedule';

        //  mode 两个选项
        // schedule 主页上的
        //  club 俱乐部主页
        this.state = {
            mode: props.mode,


            //  datas 是 主页赛程的数据
            datas: props.data,
            // clubDatas 是 俱乐部主页的数据
            // clubMode 控制是 未来赛程 还是 以往赛程
            clubDatas:{
                clubMode: props.clubMode,
                future : props.dataFuture,
                history : props.dataHistory
            },
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps );
        this.setState({
            datas: nextProps.data,
            clubDatas: {
                clubMode: nextProps.clubMode,
                future: nextProps.dataFuture,
                history: nextProps.dataHistory
            }
        })
    }

    render() {

        console.log(this.state);
        // 输出比赛状态部分 进行中／X天后开始／比分／战绩
        // status 这个比赛的状态  ( 0 未开始的 / 1 正在进行 / 2 完成的 )
         // timeGap 还剩几天开始？
         // teamScore 两队的分数
        let statusShow = function( status, timeGap, teamScore1, teamScore2 ){

            if( "0" == status ) {
                // console.log("will");
                return(
                    <span>
                        {timeGap}天后开始
                    </span>
                )
            } else if( "1" == status ) {
                // console.log("going");
                return (
                    <span className="going">
                     <i className=
                        "iconfont">&#xe60a;</i>
                         进行中
                    </span>
                );
            } else {
                // console.log("done");
                if( this.state.mode=="club" ){
                    return (
                        <span>
                            <strong>
                                {teamScore1}-{teamScore2}
                            </strong>
                        </span>
                    );
                } else {
                    return (
                        <span><a><i className=
                            "iconfont">&#xe60b;</i>
                            战报
                        </a></span>
                    );
                }
            };
        }.bind(this)

        // 主页赛程
        let scheduleList = function() {
            let temp = this.state.datas.map(function( data, index ){
            console.log("schedule**********");
            console.log(data);

                let isOneWinner = parseInt(data.team1.score) - parseInt(data.team2.score) > 0;
                let linkUrl = `/schedulelist/${data.id}`;

                return (
                    <li key={index} data-match-id = {data.id}>
                        <Link to={linkUrl}>
                            <div className="club">
                                <p>
                                    <img src={data.team1.imgSrc} />
                                    <span >
                                        {data.team1.name}
                                    </span>
                                </p>
                            </div>
                            <p className={ data.status != "0" && isOneWinner?"score winner": "score" }>
                                {data.team1.score}
                            </p>
                            <p className="vsInfo">
                                {statusShow( data.status, "2", data.team1.score, data.team2.score )}
                                {data.location} <br />
                                {data.time.date} &nbsp; {data.time.time}
                            </p>
                            <p className={ data.status != "0" && !isOneWinner ? "score winner": "score" }>
                                {data.team2.score}
                            </p>
                            <div className="club right">
                                <p>
                                    <img src={data.team2.imgSrc}/>
                                    <span>
                                        {data.team2.name}
                                    </span>
                                </p>
                            </div>
                        </Link>
                    </li>
                 )
            } );

            return temp;

        }.bind(this);

        // 俱乐部主页部分
        let scheduleChangeTime = function( ){
            let scheduledatas = 0 == this.state.clubDatas.clubMode ? this.state.clubDatas.future : this.state.clubDatas.history ;
            console.log(`scheduledatas: ${scheduledatas}`);

            return scheduledatas.map(function(data, index){
                console.log("ClubSchedule**********");

                let linkUrl = `/schedulelist/${data.id}`;
                return(
                    <li key={index} >
                        <Link to={linkUrl}>
                            <div className="club">
                                <p>
                                    <img /> {data.team1.name}
                                </p>
                            </div>
                            <p className="vsInfo">
                                {statusShow( data.status, "1", data.team1.score, data.team2.score )}

                                {data.time.date} &nbsp; {data.time.time}
                            </p>
                            <div className="club right">
                                <p>
                                    {data.team2.name}
                                    <img />
                                </p>
                            </div>
                        </Link>
                    </li>
                )
            })
        }.bind(this);

        return (
            <div className={this.state.mode=="schedule"?"schedule":"schedule clubSchedule"}   >
                <ul>
                    { this.state.mode=="club"? scheduleChangeTime() : scheduleList()}
                </ul>
            </div>
        );
    }
}

export default Schedule;
